
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('../../../../../resources/assets/js/bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('Sidebar', require('../../../../../resources/assets/js/components/MenuComponent.vue'));
Vue.component('Topbar', require('../../../../../resources/assets/js/components/HeaderComponent.vue'));

const app = new Vue({
    el: '#app',
    data: {
        items: [],
        dialogVisible: false,
        form: {},
        loading: true,
        resource: {},
        checkAll: false,
        isIndeterminate: true,
        checkedResource: []
    },
    created() {
      this.fetch();
      this.fetchResource();
    },
    methods: {
        fetch() {
            axios.get('/admin/role_all').then((res) => {
                if (res.data.code === 0) {
                    this.items = res.data.data.items;
                } else {
                    this.$message(res.data.msg);
                }
                this.loading = false;
            }).catch(function() {
                this.$message('系统错误');
                this.loading = false;
            })
        },
        fetchResource() {
            axios.get('/admin/resource').then((res) => {
                if (res.data.code === 0) {
                    this.resource = res.data.data;
                } else {
                    this.$message(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        add() {
            this.form = {};
            this.checkedResource = [];
            this.dialogVisible = true;
        },
        edit(item) {
            this.form = {id: item.id, name: item.name, resource: item.resource};
            this.checkedResource = item.resource || [];
            this.dialogVisible = true;
        },
        save() {
            this.form.resource = this.checkedResource;
            if (this.form.id) {
                this.update(this.form);
            } else {
                this.store(this.form);
            }
            // TODO
        },
        store(data) {
            axios.post('/admin/role', data).then((res) => {
                if (res.data.code === 0) {
                    this.items.push(res.data.data);
                    this.dialogVisible = false;
                } else {
                    this.$message(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        update(data) {
            axios.put('/admin/role/' + data.id, data).then((res) => {
                if (res.data.code === 0) {
                    this.fetch();
                    this.dialogVisible = false;
                } else {
                    this.$message(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        destroy(id) {
            axios.delete('/admin/role/' + id).then((res) => {
                if (res.data.code === 0) {
                    this.fetch();
                } else {
                    this.$message(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        handleCheckAllChange() {

        }
    }
});
